<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茉莉花</title>
		<style>
			#div0{
				width: 800px;
				margin: 0 auto;
				margin-top: 300px;
				margin-left: 600px;
			}
			.div1{
				position: relative;
				top: 100px;
				left: 5px;
				background-color: aqua;
				text-align: center;
				font-size: 40px;
				cursor: pointer;
				line-height: 300px;
				border: 1px solid black;
			}
			span{
				margin-top: 100px;
			}
			.div2{
				position: absolute;
				margin-left: 10px;
				width: 300px;
				height: 300px;
			}
			.div2>img{
				width: 300px;
				height: 300px;
				
			}
			.div3{
				position: relative;
				top: 100px;
				right: 5px;
				background-color: aqua;
				margin-left: 10px;
				float: left;
				text-align: center;
				font-size: 40px;
				cursor: pointer;
				line-height: 300px;
				border: 1px solid black;
			}
			
		</style>
	</head>
	<body>
		<div id="div0">
			<div class="div2"><img src="img/茉莉花1.jfif" id="disImg" />
				<div class="div1"><span>&lt;</span></div>
				<div class="div3"><span>&gt;</span></div>
			</div>
		</div>
		 
		 <script>
			 var imgs =['img/茉莉花1.jfif','img/茉莉花2.jpeg','img/茉莉花3.jfif','img/茉莉花4.jfif','img/茉莉花5.jfif'];
			 var currentImg = 0;
			 var total = imgs.length;
			 var toleft = document.getElementsByClassName('div1')[0];
			 var toright = document.querySelector(".div3");
			 toleft.addEventListener('click',function(){
				 slideImg(-1);
			 })
			toright.addEventListener('click',function(){
				 slideImg(1);
			})
			document.addEventListener('keydown',function(e){
				var key1 = e.key;
				if(key1=="ArrowRight"||key1=="ArrowDown"){
					 slideImg(1);
				}else if(key1=="ArrowLeft"||key1=="ArrowUp"){
					 slideImg(-1);
				}
			})
			var timer = setInterval(function(){
				slideImg(1);
			},1000)
			function slideImg(direction){
				currentImg+=direction;
				if(currentImg<0){
					currentImg=total-1;
				}else{
					currentImg = currentImg%total;
				}
				disImg.src = imgs[currentImg];
			}
			var disimg = document.getElementById("disImg");
			disimg.addEventListener("mouseover",function(){
				clearInterval(timer);
			})
			disimg.addEventListener("mouseout",function(){
				timer = setInterval(function(){
							slideImg(1);
						},1000)
			})
		 </script>
	</body>
</html>